<html>
  <body>
    <h1>Test Movie</h1>
    <script>
      const electron = require('electron')
      const createVideoRecorder = require('electron-recorder')

      // First we grab a reference to the current window object
      const win = electron.remote.getCurrentWindow()

      // The size of the animation is the same as the size of the window
      win.setSize(200, 200)

      // Here we create recorder object
      const video = createVideoRecorder(win, {
        fps: 60,
        output: 'test.mp4'
      })

      let frameCount = 360
      function renderFrame () {
        // Here is where we render the movie (we just make the text rotate)
        Object.assign(document.querySelector('h1').style, {
          'width': 100,
          'margin-left': 50,
          'margin-top': 50,
          '-webkit-transform': 'rotate(' + frameCount + 'deg)'
        })

        // If we still have frames left, then take a snapshot and schedule
        // another frame
	      console.log(frameCount);
        if (--frameCount > 0) {
          video.frame(renderFrame)
        } else {
          // Otherwise, movie is over and we save the snapshot to file
          video.end()
          win.close()
        }
      }

      renderFrame()
    </script>
  </body>
</html>
